<template>

	<view style="overflow: hidden;">
		<view class="list">
			<!-- 刷新页面后的顶部提示框 -->
			<!-- 当前弹出内容没有实际逻辑 ，可根据当前业务修改弹出提示 -->
			<view class="tips" :class="{ 'tips-ani': tipShow }">已加载最新排名</view>
			
			<unicloud-db ref="udb" v-slot:default="{data, loading, error, options}" :options="formData" collection="indexLists,uni-id-users"
			:page-size="10" field="files,title,user_id.username,publish_date,vote_count,_id" :where="where" @load="load" orderby="vote_count desc" getcount="true">
				<text v-if="error" class="list-info">{{error.message}}</text>
				<!-- 页面分类标题 -->
				<uni-section style="margin:0;" title="参与选手" type="circle">{{peopleNum}}</uni-section>
				<uni-section style="margin:0;" title="排名信息" type="line"></uni-section>
				<!-- 基于 uni-list 的页面布局 -->
				<uni-list :class="{ 'uni-list--waterfall': options.waterfall }">
					<!-- 通过 uni-list--waterfall 类决定页面布局方向 -->
					<!-- to 属性携带参数跳转详情页面，当前只为参考 -->
					<uni-list-item  class="uni-list-item--waterfall" title="自定义商品列表" v-for="(item,index) in data" 
					 :key="item._id" clickable="true" @click="handleItemClick(item._id)">
						<!-- 通过header插槽定义列表左侧图片 -->
						<template v-slot:header >
						<text>第{{index+1}}名</text>
						</template>
						<!-- 通过body插槽定义商品布局 -->
						<view slot="body" class="shop">
							<view class="uni-thumb shop-picture"  >
								   
								<image class="files" :src="item.files[0].url" mode="aspectFill" ></image>
							</view>
							<view style="width: 7.5rem;">
								<view class="uni-title">
									<text class="uni-ellipsis-2">{{ item.title }}</text>
								</view>
							</view>
							<view>
								<view class="uni-note uni-tag info-tag" >{{item.vote_count}}票</view>
				
							</view>
						</view>
					</uni-list-item>
				</uni-list>
				<!-- 通过 loadMore 组件实现上拉加载效果，如需自定义显示内容，可参考：https://ext.dcloud.net.cn/plugin?id=29 -->
				<uni-load-more v-if="!error && (loading || options.status === 'noMore') " :status="options.status" :contentText="loadingCTX"/>
			</unicloud-db>
	
		</view>
	</view>
</template>

<script>
	var cdbRef, currentWebview;
	const db = uniCloud.database();
	const uniTask = db.collection("uni-id-task")
	const indexList = db.collection("indexLists")

	export default {
		data() {
			return {
				formData: {
					status: 'loading', // 加载状态
				},
				where: '',
				tipShow: false ,// 是否显示顶部提示框
				peopleNum:0,
				loadingCTX:{
					contentdown:"上拉显示更多",
					contentrefresh:"正在加载...",
					contentnomore:"已经到底啦"
				}
			}
		},
		onShow() {
			console.log(this.$refs.udb.dataList.length)
			this.peopleNum=this.$refs.udb.dataList.length
		},
		onReady() {
		// #ifdef MP-WEIXIN
		//分享  
		uni.showShareMenu({  
		    withShareTicket: true  
		});
		// #endif	
		// this.$watch('where',function(){
		// 	console.log(this.$refs.udb.dataList.length)
		// 	this.peopleNum=this.$refs.udb.dataList.length
		// })
		},
		onLoad() {
			this.initShare()
		},
		methods: {
			
			initShare(){
				if (this.$jwx) {
								// uni.showToast({
								// 	title:'微信环境'
								// })
								this.$jwx.initJssdk({shareTitle:'献礼茅台七十载-朗诵作品臻选',shareDesc:'排名列表'}),function(r){
									console.log(r)
								}
							}
				},
					onPullDownRefresh() {
						this.tipShow = true
						this.formData.status = 'more'
						this.peopleNum=this.$refs.udb.dataList.length
						this.$refs.udb.loadData({
							clear: true
						}, () => {
							this.tipShow = false
							uni.stopPullDownRefresh()
						})
					},
					/**
					 * 上拉加载回调函数
					 */
					onReachBottom() {
						this.$refs.udb.loadMore()
					},
					load(data, ended) {
						if (ended) {
							this.formData.status = 'noMore'
						}
					},
					clear() {
						getApp().globalData.searchText = '';
					},
					handleItemClick(id) {
					  uni.navigateTo({
					    url: '../list/detail?id=' + id
					  })
					},
				}
			};
		</script>

<style lang="scss" scoped>
	@import '@/common/uni-ui.scss';

	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #efeff4;
		min-height: 100%;
		height: auto;
	}

	.tips {
		color: #67c23a;
		font-size: 14px;
		line-height: 40px;
		text-align: center;
		background-color: #f0f9eb;
		height: 0;
		opacity: 0;
		transform: translateY(-100%);
		transition: all 0.3s;
	}

	.tips-ani {
		transform: translateY(0);
		height: 40px;
		opacity: 1;
	}

	.shop {
		flex: 1;
		display: flex;
		justify-content: space-between;
	}

	.shop-picture {
		width: 3rem;
		height: 3rem;
		margin: 0 0rem 0 3rem;
	}

	.shop-picture-column {
		width: 100%;
		height: 170px;
		margin-bottom: 10px;
	}

	.shop-price {
		margin-top: 5px;
		font-size: 12px;
		color: #ff5a5f;
	}

	.shop-price-text {
		font-size: 16px;
	}

	.hot-tag {
		background: #ff5a5f;
		border: none;
		color: #fff;
	}
	
	.info-tag{
		background: #ff5a5f;
		border: none;
		color: #fff;
		width: 3rem;
	}
	
	.index-tag{
		color: black;
		background: #9e9e9e7a;
		border: none;
		width: 1rem;
		position: absolute;
		top: 0;
		text-align: center;
	}
	.primary-tag{
		background: #4caf50;
		border: none;
		color: #fff;
		width: 2rem;
		font-size: 1rem;
		position: absolute;
		right: 1rem;
		height: 1.5rem;
	}

	.button-box {
		height: 30px;
		line-height: 30px;
		font-size: 12px;
		background: #007AFF;
		color: #fff;
	}

	.uni-link {
		flex-shrink: 0;
	}

	.ellipsis {
		display: flex;
		overflow: hidden;
	}

	.uni-ellipsis-1 {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.uni-ellipsis-2 {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}


	// 默认加入 scoped ，所以外面加一层提升权重
	.list {

		.uni-list--waterfall {

			/* #ifndef H5 || APP-VUE */
			// 小程序 编译后会多一层标签，而其他平台没有，所以需要特殊处理一下
			/deep/ .uni-list {
				/* #endif */
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				padding: 5px;
				box-sizing: border-box;

				/* #ifdef H5 || APP-VUE */
				// h5 和 app-vue 使用深度选择器，因为默认使用了 scoped ，所以样式会无法穿透
				/deep/
				/* #endif */
				.uni-list-item--waterfall {
					width: 50%;
					box-sizing: border-box;

					.uni-list-item__container {
						padding: 5px;
						flex-direction: column;
					}
				}

				/* #ifndef H5 || APP-VUE */
			}

			/* #endif */
		}
	}

	.search-icons {
		padding: 16rpx;
	}

	.search-container-bar {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: center;
		align-items: center;
		position: fixed;
		left: 0;
		right: 0;
		z-index: 10;
		background-color: #fff;
	}

	/* #ifndef APP-NVUE */
	/deep/
	/* #endif */
	.uni-searchbar__box {
		border-width: 0;
	}

	/* #ifndef APP-NVUE */
	/deep/
	/* #endif */
	.uni-input-placeholder {
		font-size: 28rpx;
	}

	.list-info {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		flex: 1;
		text-align: center;
		font-size: 26rpx;
		color: #808080;
		margin-top: 20rpx;
	}
</style>
